<template>
	<view class="container">
		<carHeader style="padding:10rpx;" :title="'维修任务'"></carHeader>

		<view class="top">
			<input type="text" placeholder="输入需要搜索的内容" v-model="searchQuery" @input="search" />
			<image src="/static/车联网服务商家端-03核销记录_slices/搜索.png"></image>
			<view class="one" style="margin-left: 70px;">
				<text>共{{filteredList.length}}条</text>
			</view>
			<view class="one">
				<text>状态</text>
			</view>
			<view class="one">
				<text>维修方式</text>
			</view>




			<view class="dropdown">
				<view class="dropdown-trigger" @click="toggleDropdown">
					{{ selected || '全部' }}
					<view class="arrow" :class="{ 'arrow-up': isDropdownVisible }">
						<u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
					</view>
				</view>
				<transition name="fade-slide">
					<view class="dropdown-content" v-show="isDropdownVisible">
						<scroll-view scroll-y="true" style="height: 200px;">
							<view class="dropdown-item" v-for="(item, index) in range" :key="index"
								@click="selectItem(item)">
								{{ item }}
							</view>
						</scroll-view>
					</view>
				</transition>
			</view>

			<view class="dropdown">
				<view class="dropdown-trigger" @click="toggleDropdown2">
					{{ selected2 || '全部' }}
					<view class="arrow" :class="{ 'arrow-up': isDropdownVisible2 }">
						<u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
					</view>
				</view>
				<transition name="fade-slide">
					<view class="dropdown-content" v-show="isDropdownVisible2">
						<scroll-view scroll-y="true" style="height: 200px;">
							<view class="dropdown-item" v-for="(item, index) in method" :key="index"
								@click="selectItem2(item)">
								{{ item }}
							</view>
						</scroll-view>
					</view>
				</transition>
			</view>s
		</view>

		<view class="repair" v-for="(item, index) in filteredList" :key="index">
			<view class="number">
				<text>维修单号：{{item.repairOrderNo}}</text>
				<view>
					<text>{{item.repairStatus}}</text>
					<text v-if="shouldShowFlag(item)">🚩</text> <!-- 使用 Unicode 字符 -->
				</view>
			</view>
			<view class="info">维修方式：{{item.bookingType}}</view>
			<view class="info">预约日期：{{item.bookingTime}}</view>
			<view class="btn">
				<u-button type="primary" :color="'#0662E6'" shape="circle" @click="nav(item.repairOrderNo)">
					查看详情
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filteredList: [], // 存储过滤后的列表
				wxList: [],
				searchQuery: '', // 绑定到输入框的数据

				isDropdownVisible: false, // 控制下拉框的显示隐藏
				selected: '全部', // 当前选中的项
				isDropdownVisible2: false, // 控制下拉框的显示隐藏
				selected2: '全部', // 当前选中的项
				range: ['全部', '已完成', '进行中'], // 状态下拉列表的选项
				method: ['全部', '到店维修', '上门取车'] // 维修方式下拉列表的选项
			};
		},
		onShow() {
			this.fetchData();
		},
		methods: {

			shouldShowFlag(item) {
				// 只有当状态为“进行中”且预约日期为明天时才显示小红旗
				return item.repairStatus === '进行中' && this.isTomorrow(item.bookingTime);
			},
			// 添加一个辅助方法来判断是否为明天
			isTomorrow(dateStr) {
				const bookingDate = new Date(dateStr);
				if (isNaN(bookingDate.getTime())) {
					console.error('Invalid date:', dateStr);
					return false;
				}

				const today = new Date();
				const tomorrow = new Date(today);
				tomorrow.setDate(tomorrow.getDate() + 1);

				return bookingDate.toDateString() === tomorrow.toDateString();
			},

			search() {
				const query = this.searchQuery.trim(); // 清除输入两端的空白字符
				if (query === '') {
					this.filteredList = this.wxList; // 如果没有输入，则显示所有数据
				} else {
					this.filteredList = this.wxList.filter(item => {
						// 过滤逻辑：如果维修编号、状态、维修方式、预约日期包含输入的关键词，则保留该条目
						return item.repairOrderNo.includes(query) ||
							item.repairStatus.includes(query) ||
							item.bookingType.includes(query);
						item.bookingTime.includes(query);
					});
				}
			},

			nav(option) {
				uni.navigateTo({
					url: `/pages/repairDetails/repairDetails?id=${option}`
				});
			},

			fetchData() {
				uni.request({
					url: 'http://localhost:8080/carShopService/booking/list2', // 示例API地址
					method: 'GET', // 请求方式

					success: (res) => {
						console.log('请求成功:', res.data.rows);
						this.wxList = res.data.rows;
						this.filteredList = this.wxList; // 初始化过滤列表
					},
					fail: (err) => {
						console.error('请求发生错误:', err);
					}
				});
			},

			toggleDropdown() {
				this.isDropdownVisible = !this.isDropdownVisible;
			},

			selectItem(item) {
				this.selected = item; // 更新选中项
				this.isDropdownVisible = false; // 关闭下拉框
				this.filterList(); // 过滤列表
			},

			toggleDropdown2() {
				this.isDropdownVisible2 = !this.isDropdownVisible2;
			},

			selectItem2(item) {
				this.selected2 = item; // 更新选中项
				this.isDropdownVisible2 = false; // 关闭下拉框
				this.filterList(); // 过滤列表
			},

			filterList() {
				let filtered = this.wxList;

				if (this.selected !== '全部') {
					filtered = filtered.filter(item => item.repairStatus === this.selected);
				}

				if (this.selected2 !== '全部') {
					filtered = filtered.filter(item => item.bookingType === this.selected2);
				}

				this.filteredList = filtered;
			}
		}
	};
</script>


<style lang="scss">
	.top {
		// background-color: pink;
		margin-top: -130px;

		input {
			background-color: #fff;
			padding: 10px 10px;
			border-radius: 50px;
			width: 80%;
			margin: 0 auto;
			font-size: 13px;
			color: gray;
		}

		image {
			width: 14px;
			height: 14px;
			float: right;
			margin-top: -30px;
			margin-right: 50px;
		}

		.one {
			color: #fff;
			display: inline-block;
			margin: 10px 30px;
			font-size: 13px;
		}

		.two {
			color: #fff;
			display: inline-block;
			// margin-left: 10px;
			font-size: 13px;
		}

	}

	.repair {
		background-color: white;
		height: 270rpx;
		width: 95%;
		// position: absolute;
		margin-top: 10px;
		margin-left: 20rpx;
		border-radius: 20rpx;

		// z-index: 1;
		.number {
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			// background-color: pink;
			border-bottom: 5px solid #F9F9F9;

			view {
				float: right;
				font-size: 12px;
				color: #5D9CF9;
			}
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;
		}

		.btn {
			width: 30%;
			position: relative;
			top: -60px;
			right: -240px;

		}
	}

	.dropdown {
		display: inline-block;
		position: relative;
		left: 70px;
		margin-left: 5px;
		width: 28%;
		/* 调整宽度 */
		border-radius: 50px;
	}

	.dropdown-trigger {
		padding: 5px 20px;
		font-size: 12px;
		background-color: rgba(255, 255, 255, 0.1);
		// border: 1px solid #ddd;  
		border-radius: 40px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffffff;
	}

	.dropdown-content {
		position: absolute;
		top: 100%;
		/* 紧接在触发按钮下方 */
		left: 0;
		right: 0;
		color: gray;
		height: 120px;
		font-size: 12px;
		border-radius: 20px;
		background-color: rgba(0, 0, 0, 0.1);
		// border: 1px solid #ddd;  
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.dropdown-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.arrow {
		transition: transform 0.2s;
	}

	.arrow-up {
		transform: rotate(180deg);
	}
</style>